<template>
	<view class="content">
		<view class="nav-box" :style="{'height':height+'px','background':bgColor}">
			<view class="status_bar" :style="{'height':statusBarHeight+'px'}"></view>
			<view class="nav-main flex items-center" :style="{height: navBarHeight+'px'}">
				<view class="search-input ml-30">
					<uni-icons type="search" size="16"></uni-icons>
					<input type="text" v-model="searchWords" placeholder="输入搜索内容" class="ml-20"
						style="font-size: 24rpx;" />
					<view class="font-24 mr-20" @click="search">搜索</view>
				</view>
			</view>
		</view>
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item, index) in banners" :key="index">
					<view class="swiper-item">
						<image :src="imgUrl+item" mode="" style="width:100%;height: 100%;"></image>
					</view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="swiper-item">
						<image src="../../static/images/banner3.png" mode="" style="width:100%;height: 100%;"></image>
					</view>
				</swiper-item> -->
			</swiper>
		</view>
		<view class="flex flex-wrap items-center bg-white navs">
			<view class="nav-list flex items-center justify-center flex-colum pt-30" v-for="(item, index) in navList"
				:key="index" @click="goTab(item)">
				<image :src="item.icon" mode=""></image>
				<view class="font-24 mt-10">{{item.title}}</view>
			</view>
		</view>
		<view class="p-30 bg-white">
			<view class="info">
				<view class="flex items-center p-20">
					<uni-icons custom-prefix="iconfont" type="icon-gonggao" size="20" color="#46B4B1"></uni-icons>
					<view class="font-26 ml-10 font-no-wrap" style="width: 80vw;">
						{{article[0].title}}
					</view>
					<uni-icons custom-prefix="iconfont" type="icon-xiangyou1" size="14" color="#9C9C9C"></uni-icons>
				</view>
			</view>
		</view>
		<view class="pt-20 pb-20 pl-40 pr-40 bg-white flex" :style="{position: 'sticky', top: (height + 65)+'rpx'}">
			<view class="mr-40 text-center" @click="setIndex(0)">
				<view :class="[selectIndex === 0 ? 'list-select' : '']" style="width: 68rpx;">招聘</view>
				<view class="list-bord mt-10" v-if="selectIndex === 0"></view>
			</view>
			<view class="mr-40 text-center" @click="setIndex(1)">
				<view :class="[selectIndex === 1 ? 'list-select' : '']" style="width: 68rpx;">求职</view>
				<view class="list-bord mt-10" v-if="selectIndex === 1"></view>
			</view>
			<view class="mr-40 text-center" @click="setIndex(2)">
				<view :class="[selectIndex === 2 ? 'list-select' : '']" style="width: 68rpx;">零活</view>
				<view class="list-bord mt-10" v-if="selectIndex === 2"></view>
			</view>
			<view class="mr-40 text-center" @click="setIndex(3)">
				<view :class="[selectIndex === 3 ? 'list-select' : '']" style="width: 68rpx;">零工</view>
				<view class="list-bord mt-10" v-if="selectIndex === 3"></view>
			</view>
		</view>
		<view class="pl-30 pr-30 pt-30" v-for="(item, index) in inviteLists" :key="index" v-if="selectIndex === 0"
			@click="$goRoute.goUrl('/pages/lists/details?id='+item.id)">
			<view class="bg-white pl-20 pr-20 pt-30 pb-30 border-radius">
				<view class="flex space-between flex-align-end">
					<view class="font-bold font-30">{{item.name}}</view>
					<view class="font-26 font-g font-bold">{{item.payLow}}-{{item.payHigh}}</view>
				</view>
				<view class="flex font-26 mt-20">
					<view>{{item.companyId_dictText}}</view>
					<!-- <view class="ml-40">2000-5000人</view> -->
				</view>
				<view class="flex font-22 mt-10" style="color: #686E6E;">
					<view class="pt-10 pb-10 pl-30 pr-30">{{item.jobNature}}</view>
					<view class="pt-10 pb-10 pl-30 pr-30">{{item.peopleNum}}人</view>
					<view class="pt-10 pb-10 pl-30 pr-30">{{item.education_dictText}}</view>
					<view class="pt-10 pb-10 pl-30 pr-30">{{item.experience}}</view>
				</view>
				<view class="flex space-between items-center mt-10">
					<view class="flex items-center">
						<image src="../../static/images/avatar.png" mode=""
							style="width: 50rpx;height: 50rpx;border-radius: 50%;"></image>
						<view class="font-24 ml-10">{{item.hruserId_dictText}}</view>
					</view>
					<view class="font-24">{{item.city}}</view>
				</view>
			</view>
		</view>
		<view class="pl-30 pr-30 pt-30" v-for="(item, index) in resumeLists" :key="index" v-if="selectIndex === 1"
			@click="$goRoute.goUrl('/pages/lists/info?id='+item.id)">
			<view class="bg-white pl-30 pr-30 pt-20 pb-20 border-radius">
				<view class="flex space-between items-center mt-10">
					<view class="flex items-center" @click="$goRoute.goUrl('/pages/lists/info?id='+item.id)">
						<image src="../../static/images/avatar.png" mode=""
							style="width: 70rpx;height: 70rpx;border-radius: 50%;"></image>
						<view class=" ml-20">
							<view class="font-28">{{item.username}}</view>
							<view class="font-22 mt-10 font-grey">{{calculateAge(item.birthday)}}岁 |
								{{calculateAge(item.workTime)}}年 |
								{{item.zbApplyeducationList.length !== 0 ? item.zbApplyeducationList[0].education : '暂未填写学历'}}
								|
								{{item.zbApplyintentionList.length !== 0 ? item.zbApplyintentionList[0].expectPayLow + '-' + item.zbApplyintentionList[0].expectPayHigh : '暂未填写薪酬'}}
							</view>
						</view>
					</view>
					<view class="font-24 font-g border-g border-radius pt-10 pb-10 pl-20 pr-20">打招呼</view>
				</view>
				<view class="flex items-center mt-20" @click="$goRoute.goUrl('/pages/lists/info?id='+item.id)">
					<uni-icons custom-prefix="iconfont" type="icon-aixin_shixin" size="16" color="#46B4B1"></uni-icons>
					<view class="font-24 ml-20">期望：<text v-for="(itd, idx) in item.zbApplyintentionList"
							:key="idx">{{itd.expectPosition}}</text></view>
				</view>
				<view class="flex items-center mt-20" @click="$goRoute.goUrl('/pages/lists/info?id='+item.id)"
					v-if="item.zbApplyworkList.length !== 0">
					<uni-icons custom-prefix="iconfont" type="icon-gongzuoxinxi" size="16" color="#46B4B1"></uni-icons>
					<view class="font-24 ml-20">{{item.zbApplyworkList[0].companyName}} ·
						{{item.zbApplyworkList[0].position}}
					</view>
				</view>
			</view>
		</view>

		<view class="pl-30 pr-30 pt-30" v-for="(item, index) in obbLists" :key="index"
			v-if="selectIndex === 2 || selectIndex === 3">
			<view class="bg-white pl-30 pr-30 pt-20 pb-20 border-radius">
				<view>{{item.title}}</view>
				<view class="font-no-wrap2 mt-10 font-24 font-grey">{{item.info}}</view>
			</view>
		</view>

		<view class="text-center mt-200" v-if="selectIndex === 0 && inviteLists.length === 0">暂无招聘信息...</view>
		<view class="text-center mt-200" v-if="selectIndex === 1 && resumeLists.length === 0">暂无求职信息...</view>
		<view class="text-center mt-200" v-if="selectIndex === 2 && obbLists.length === 0">暂无零活信息...</view>
		<view class="text-center mt-200" v-if="selectIndex === 3 && obbLists.length === 0">暂无零工信息...</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '../../utils/constant';
	import {
		list
	} from '../../api/article';
	import {
		list as inviteList
	} from '../../api/invite.js'
	import {
		list as resumeList
	} from '../../api/apply_user.js'
	import {
		list as obbList
	} from '../../api/obb.js'
	import {
		getConfig
	} from '../../api/common';
	export default {
		data() {
			return {
				banners: [],
				imgUrl: BASE_URL+ '/jeecg-boot/sys/common/static/',
				bannerConfig: null,
				article: [],
				selectIndex: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				height: 0,
				statusBarHeight: 0,
				navBarHeight: 0,
				searchWords: '',
				navList: [{
					title: '求职',
					icon: '../../static/images/n1.png',
					url: '/pages/lists/lists?type=1',
					type: 0
				}, {
					title: '招聘',
					icon: '../../static/images/n2.png',
					url: '/pages/lists/lists?type=1',
					type: 0
				}, {
					title: '企业',
					icon: '../../static/images/n3.png',
					url: '/pages/company/company',
					type: 1
				}, {
					title: '问卷调查',
					icon: '../../static/images/n4.png',
					url: '/pages/papers/papers',
					type: 1
				}, {
					title: '线上招聘会',
					icon: '../../static/images/n5.png',
					url: '/pages/fairs/fairs?type=1',
					type: 1
				}, {
					title: '线下招聘会',
					icon: '../../static/images/n6.png',
					url: '/pages/fairs/fairs?type=0',
					type: 1
				}, {
					title: '零活招聘',
					icon: '../../static/images/n8.png',
					url: '/pages/job_work/job_work?type=0',
					type: 1
				}, {
					title: '零工求职',
					icon: '../../static/images/n7.png',
					url: '/pages/job_work/job_work?type=1',
					type: 1
				}, ],
				user: null,
				inviteLists: [],
				resumeLists: [],
				obbLists: [],
			};
		},
		onLoad(options) {
			this.getHeight()
			this.getConfig()
			this.getArticle()
			this.getInviteList()
			this.getResumeList()
			this.getObbList()
		},
		onShow() {
			this.getUserType()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '河口人才招聘小程序',
				path: '/pages/index/index'
			}
		},
		methods: {
			calculateAge(birthdate) {
				var today = new Date();
				var birthDate = new Date(birthdate);
				var age = today.getFullYear() - birthDate.getFullYear();
				var monthDiff = today.getMonth() - birthDate.getMonth();

				if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
					age--;
				}

				return age;
			},
			getObbList() {
				obbList({
					pageNo: 1,
					pageSize: 10,
					title: this.searchWords,
					type: this.selectIndex === 2 ? 0 : 1
				}).then(res => {
					this.obbLists = res.result.records
				})
			},
			getResumeList() {
				resumeList({
					pageNo: 1,
					pageSize: 10,
					username: this.searchWords,
				}).then(res => {
					this.resumeLists = res.result.records
				})
			},
			getInviteList() {
				inviteList({
					pageNo: 1,
					pageSize: 10,
					name: this.searchWords,
				}).then(res => {
					this.inviteLists = res.result.records
				})
			},
			getArticle() {
				list({
					pageNo: 1,
					pageSize: 10
				}).then(res => {
					this.article = res.result.records
				})
			},
			getConfig() {
				getConfig({
					keywords: 'wx_banner'
				}).then(res => {
					this.bannerConfig = res.result
					if (res.result.images) {
						this.banners = res.result.images.split(',')
					}
				})
			},
			getUserType() {
				const user = uni.getStorageSync('userInfo')
				if (user) {
					this.user = user
					if (user.type === 1) {
						uni.setTabBarItem({
							index: 1,
							text: '人才',
							iconPath: 'static/images/t-2.png',
							selectedIconPath: 'static/images/t-2-s.png'
						})
					}
				}
			},
			search() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.selectIndex === 0) {
					this.getInviteList()
				} else if (this.selectIndex === 1) {
					this.getResumeList()
				} else {
					this.getObbList()
				}
				setTimeout(() => {
					uni.hideLoading()
				}, 1000)
			},
			goTab(item) {
				if (item.type === 0) {
					this.$goRoute.goTab(item.url)
				} else {
					this.$goRoute.goUrl(item.url)
				}
			},
			setIndex(index) {
				this.selectIndex = index
				this.search()
			},
			//获取屏幕导航栏高度
			getHeight() {
				if (wx.canIUse('getMenuButtonBoundingClientRect')) {
					let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
					this.statusBarHeight = sysInfo.statusBarHeight;
					// 胶囊位置信息
					let rect = wx.getMenuButtonBoundingClientRect();
					this.menuButtonRect = JSON.parse(JSON.stringify(rect));
					// 导航栏高度
					let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
					this.navBarHeight = navBarHeight;
					// 自定义导航栏的高度
					this.height = sysInfo.statusBarHeight + navBarHeight;
				} else {
					wx.showToast({
						title: '您的微信版本过低，界面可能会显示不正常',
						icon: 'none',
						duration: 4000
					});
				}
			},

		}
	};
</script>

<style lang="less">
	page {
		background: #F6F6F6;
	}

	.nav-box {
		background-color: #46b4b1;
		position: sticky;
		top: 0;
		z-index: 9999;

		.search-input {
			background-color: rgba(255, 255, 255, .8);
			height: 30px;
			display: flex;
			align-items: center;
			border-radius: 50rpx;
			padding: 0 30rpx;
		}
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.navs {
		position: relative;
	}

	.navs:after {
		position: absolute;
		left: 0;
		right: 0;
		top: -20px;
		content: '';
		height: 30px;
		width: 100%;
		border-radius: 50% 50% 0 0;
		background-color: #fff;
	}

	.nav-list {
		width: 25vw;

		image {
			width: 10vw;
			height: 10vw;
		}
	}

	.info {
		background: rgba(70, 180, 177, .12);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.list-bord {
		background: linear-gradient(270deg, #75FFED 0%, #46B4B1 100%);
		width: 68rpx;
		height: 8rpx;
	}

	.list-select {
		color: #46B4B1;
	}
</style>